<template>
  <el-dialog :visible.sync="dialogVisible" :title="title" width="800px" @close="onClose">
    <table class="tb-table">
      <tr>
        <td class="tb-title" width="15%">手机号:</td>
        <td colspan="3" width="85%">{{ form.phoneNo }}</td>
      </tr>
      <tr>
        <td class="tb-title" width="15%">发送状态:</td>
        <td colspan="3" width="85%">
          <span v-if="form.completed">成功</span>
          <span v-if="!form.completed">失败</span>
        </td>
      </tr>
      <tr>
        <td class="tb-title" width="15%">发送时间:</td>
        <td width="35%">
          {{ form.createTime }}
        </td>
        <td class="tb-title" width="15%">回执时间:</td>
        <td width="35%">
          {{ form.receiveTime }}
        </td>
      </tr>
      <tr>
        <td class="tb-title" width="15%">异常信息:</td>
        <td colspan="3" width="85%">
          <span>{{ form.error }}</span>
        </td>
      </tr>
      <tr>
        <td class="tb-title" width="15%">发送内容:</td>
        <td colspan="3" width="85%">
          <span>{{ form.context }}</span>
        </td>
      </tr>
      <tr>
        <td class="tb-title" width="15%">创建时间:</td>
        <td width="35%">
          {{ form.createTime }}
        </td>
        <td class="tb-title" width="15%">更新时间:</td>
        <td width="35%">
          {{ form.updateTime }}
        </td>
      </tr>
    </table>
  </el-dialog>
</template>

<script>
import { getOne } from '@/api/sysSms'

export default {
  data() {
    return {
      dialogVisible: false,
      title: '查看',
      form: {
        id: '',
        phoneNo: '',
        completed: '',
        error: '',
        createTime: '',
        updateTime: '',
        receiveTime: '',
        context: ''
      },
      activeNames: ['1']
    }
  },
  methods: {
    init() {
      if (this.form.id) {
        getOne(this.form.id).then((res) => {
          if (res && res.code === 20000) {
            const rtn = res.data
            this.form = rtn
          }
        })
      }
    },
    onShow(id) {
      this.form.id = id
      this.dialogVisible = true
      this.init()
    },
    onClose() {
      this.dialogVisible = false
      this.form = this.$options.data().form
    }
  }
}
</script>

<style scoped>

.el-collapse-item /deep/ .el-collapse-item__header {
  height: 40px;
  line-height: 40px;
  background-color: #f6f6f6 !important;
  padding: 10px 10px;
  margin-bottom: 20px;
}

</style>
